<template>
  <v-form v-model="valid" ref="myConsultantForm">
    <v-text-field v-model="consultant.name" label="请输入姓名" required :rules="nameRules"/>
   <!-- <v-text-field v-model="consultant.goodField" label="请输入擅长领域" required :rules="goodFieldRules" />-->
    <v-text-field v-model="consultant.description" label="请输入描述" required :rules="descriptionRules" />
    <v-flex>
      <!--区域-->
      <v-select
        :items="areaOptions"
        item-text="name"
        item-value="id"
        label="所属区域"
        v-model="consultant.areaId"

        autocomplete
        clearable
        dense chips

      >
        <template slot="selection" slot-scope="data">
          <v-chip small>{{ data.name}}</v-chip>
        </template>
      </v-select>
    </v-flex>
    <v-flex>
      <!--服务-->
      <v-select
        :items="businessTypeOptions"
        item-text="name"
        item-value="id"
        label="所属服务"
        v-model="consultant.businessTypeId"
        required
        autocomplete
        clearable
        dense chips
        :rules="[v => !!v || '所属服务不能为空']"
      >
        <template slot="selection" slot-scope="data">
          <v-chip small>{{ data.name}}</v-chip>
        </template>
      </v-select>
    </v-flex>
    <v-layout row>
      <v-flex xs3>
        <span style="font-size: 16px; color: #444">上传图片：</span>
      </v-flex>
      <v-flex>
        <v-upload
          v-model="consultant.imagePath"  url="/upload/image" :multiple="false" :pic-width="250" :pic-height="90"
        />
      </v-flex>
    </v-layout>
    <v-layout class="my-4" row>
      <v-spacer/>
      <v-btn @click="submit" color="primary">提交</v-btn>
      <v-btn @click="clear">重置</v-btn>
    </v-layout>
  </v-form>
</template>

<script>
  export default {
    name: "consultant-form",
    props: {
      oldConsultant: {
        type: Object
      },
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        valid: false, // 表单校验结果标记
        consultant: {
          name:'',
          areaId:0,
          orginAreaId:0,
          businessTypeId:0,
          orginBusinessTypeId:0,
          description:'',
          imagePath:''
        },
        nameRules: [
          v => !!v || "姓名不能为空",
          v => v.length > 1 || "姓名至少2位"
        ],
        goodFieldRules: [
          v => !!v || "擅长领域不能为空",
          v => v.length > 1 || "擅长领域至少2位"
        ],
        descriptionRules: [
        v => !!v || "描述不能为空",
        v => v.length > 1 || "描述至少2位"
      ],
        areaOptions:[],//区域
        businessTypeOptions:[]//服务
      }
    },
    methods: {
      submit() {
        // 表单校验
        if (this.$refs.myConsultantForm.validate()) {
          // 定义一个请求参数对象，通过解构表达式来获取consultant中的属性
          /*const {name,description,imagePath, ...params} = this.consultant;
          // 数据库中只要保存分类的id即可，因此我们对categories的值进行处理,只保留id，并转为字符串
          params.name = name;
          params.description = description;
          params.imagePath = imagePath;*/
          // 将字母都处理为大写
         // params.letter = letter.toUpperCase();
          // 将数据提交到后台
          // this.$http.post('/item/brand', this.$qs.stringify(params))
          if(this.isEdit){
            this.consultant.orginAreaId = this.oldConsultant.areaId;
            this.consultant.orginBusinessTypeId = this.oldConsultant.businessTypeId;
          }
          this.$http({
            method: this.isEdit ? 'put' : 'post',
            url: '/info/consultant',
            data: this.consultant//params
          }).then(() => {
            // 关闭窗口
            this.$emit("close");
            this.$message.success("保存成功！");
            this.clear();
          })
            .catch(() => {
              this.$message.error("保存失败！");
            });
        }
      },
      clear() {
        // 重置表单
        this.$refs.myConsultantForm.reset();
        // 需要手动清空商品分类
        //this.categories = [];
      }
    },
    watch: {
      oldConsultant: {// 监控oldConsultant的变化
        deep:true,
        handler(val) {
          // 查询区域
          this.$http
            .get("/info/area/list")
            .then(({ data }) => {
              data.splice(0,1);
              this.areaOptions = data;
            });
          // 查询服务
          this.$http
            .get("/info/business/list")
            .then(({ data }) => {
              data.splice(0,1);
              this.businessTypeOptions = data;
            });
          if (!this.isEdit) {
            Object.assign(this.consultant, {
              name:'',
              areaId:0,
              orginAreaId:0,
              businessTypeId:0,
              orginBusinessTypeId:0,
              description:'',
              imagePath:''
            });
          } else {
            // 注意不要直接复制，否则这边的修改会影响到父组件的数据，copy属性即可
             this.consultant = Object.deepCopy(val);
             this.consultant.areaId = val.areaId;
             this.consultant.businessTypeId = val.businessTypeId;
          }
        }
      }
    }
  }
</script>

<style scoped>

</style>
